import * as React from "react";
import Box from "@mui/material/Box";
import SpeedDial from "@mui/material/SpeedDial";
import SpeedDialIcon from "@mui/material/SpeedDialIcon";
import SpeedDialAction from "@mui/material/SpeedDialAction";
import FileCopyIcon from "@mui/icons-material/FileCopyOutlined";
import SaveIcon from "@mui/icons-material/Save";
import PrintIcon from "@mui/icons-material/Print";
import ShareIcon from "@mui/icons-material/Share";
import SettingsIcon from "@mui/icons-material/Settings";
import { useContext } from "react";
import { ThemeColorContext } from "../App";
import LandscapeIcon from "@mui/icons-material/Landscape";
import ParkOutlinedIcon from "@mui/icons-material/ParkOutlined";
import SportsKabaddiOutlinedIcon from "@mui/icons-material/SportsKabaddiOutlined";
import FilterDramaOutlinedIcon from "@mui/icons-material/FilterDramaOutlined";
const actions = [
  {
    icon: <FilterDramaOutlinedIcon />,
    name: "克莱因蓝",
    sx: {
      bgcolor: "#002FA7", //mui蓝
      "&:hover": {
        bgcolor: "#012172",
      },
      color: "common.white",
    },
  },
  {
    icon: <SportsKabaddiOutlinedIcon />,
    name: "苏睿紫",
    sx: {
      bgcolor: "#9c27b0",
      "&:hover": {
        bgcolor: "#670477",
      },
      color: "common.white",
    },
  },
  {
    icon: <ParkOutlinedIcon />,
    name: "环保绿",
    sx: {
      bgcolor: "#2e7d32",
      "&:hover": {
        bgcolor: "#08670d",
      },
      color: "common.white",
    },
  },
  {
    icon: <LandscapeIcon />,
    name: "山大红",
    sx: {
      bgcolor: "#9c0c13",
      "&:hover": {
        bgcolor: "#720309",
      },
      color: "common.white",
    },
  },
];

export default function ChangeTheme() {
  const themeColor = useContext(ThemeColorContext);
  const handleChangeTheme = (e) => {
    localStorage.setItem("themecolor", e);
    themeColor.setThemeColor(e);
  };
  return (
    <Box
      sx={{
        // position: "fixed",
        // zIndex: "21",
        // height: 320,
        transform: "translateZ(0px)",
        flexGrow: 1,
        marginRight: 2,
      }}
    >
      <SpeedDial
        ariaLabel="SpeedDial basic example"
        sx={{ bottom: 16, right: 16 }}
        icon={<SpeedDialIcon icon={<SettingsIcon />} />}
        direction="left"
        FabProps={{ size: "small" }}
        // size="small"
      >
        {actions.map((action, key) => (
          <SpeedDialAction
            // sx={{ bgcolor: "#1976d2" }}
            FabProps={{ sx: action.sx }}
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            onClick={() => handleChangeTheme(key)}
          />
        ))}
      </SpeedDial>
    </Box>
  );
}
